<template>
    <div
        class="flex column a-center fw-100 fh-100"
        style="padding-top: 15vh"
    >
        <div style="width: 400px; height: 400px;color:#409eff">
            <component :is="Active" />
        </div>
        <router-link :to="{ path: '/' }">
            <el-button type="primary">回到首页</el-button>
        </router-link>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { SvgIcon } from '@/utils'

const route = useRoute()
const exceptions: Record<'/403' | '/404' | '/500' | any, string> = {
    '/403': SvgIcon('error/no-permission'),
    '/404': SvgIcon('error/not-found'),
    '/500': SvgIcon('error/service-error'),
}
const Active = computed(() => exceptions[route.path] || SvgIcon('error/empty'))
</script>
<style scoped></style>
